import styles from './index.module.less';
import { Tooltip } from 'antd';

const BarYCategoryItem = (props: any) => {
    const {
        item,
        index,
        formatter,
        textStyle,
        itemStyle,
        multipleColor = false,
        valueLabel = true,
        onClickItem,
        icon,
        unit,
        orient = 'horizontal',
    } = props;
    const colorArr = ['', '#FF2D7B', '#FFD809', '#0CF348', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF', '#0AEBFF']
    return (
        <tr className={`${styles['bar-item']} ${styles[`bar-item-${index}`]}`}>
            <td style={itemStyle?.itemGap}>
                <div className={styles['rank-label']}>
                    {multipleColor ? (
                        <div className={styles['rank-font']}>NO.{index}</div>
                    ) : (
                        icon == false ? <div className={styles['rank-icon1']}><span>{index}</span></div> :
                            <div className={styles['rank-icon']}>{index}</div>
                    )}
                </div>
            </td>
            {orient == 'vertical' ? (
                <td style={itemStyle?.itemGap}>
                    <div className={styles['group-vertical']} style={itemStyle?.style}>
                        <div
                            className={styles['axis-label']}
                            style={textStyle?.axisLabel}
                            onClick={() => {
                                onClickItem?.(item);
                            }}
                        >
                            <Tooltip title={item.name}>{item.name}</Tooltip>
                        </div>
                        <div className={styles['progress']} style={itemStyle?.style}>
                            <div
                                className={`${styles['progress-value']} ${multipleColor ? styles[`progress-color`] : ''
                                    }`}
                                style={{ width: `${item.percent}%` }}
                            ></div>
                        </div>
                    </div>
                </td>
            ) : (
                <>
                    <td style={itemStyle?.itemGap}>
                        <div
                            className={styles['axis-label']}
                            style={textStyle?.axisLabel}
                            onClick={() => {
                                onClickItem?.(item);
                            }}
                        >
                            <Tooltip title={item.name}>{item.name}</Tooltip>
                        </div>
                    </td>
                    <td style={itemStyle?.itemGap}>
                        <div className={styles['progress']} style={itemStyle?.style}>
                            <div
                                className={`${styles['progress-value']} ${multipleColor ? styles[`progress-color`] : ''
                                    }`}
                                style={{ width: `${item.percent}%` }}
                            ></div>
                        </div>
                    </td>
                </>
            )}
            {valueLabel && (
                <>
                    <td style={itemStyle?.itemGap}>
                        <div style={textStyle?.valueLabel} className={'rank-font'}>
                            <span
                                style={{ color: colorArr[index] }}> {formatter ? formatter(item) : item.value} </span>
                            <span style={textStyle?.unitLabel}>{unit ? unit : ""}</span>
                        </div>
                    </td>
                    {item?.value2 && (
                        <td style={itemStyle?.itemGap}>
                            <div style={textStyle?.valueLabel}>
                                {formatter ? formatter(item) : item.value2}
                            </div>
                        </td>
                    )}
                </>
            )}
        </tr>
    );
};
const BarYCategory: React.FC<any> = (props) => {
    const {
        titleLabel = false,
        data = [],
        rank,
        nameLabelText,
        valueLabelText,
        valueLabelText2,
        legendStyle,
        orient,
        className,
        col = 1,
        length1 = 5,
        length2 = 10
    } = props;
    return (
        <>
            {
                col == 1 &&
                <table className={`${styles['popular-ranking']} ${className || ''}`}>
                    <tbody className={styles['ranking-tbody']}>
                        {titleLabel && (
                            <tr className={styles['bar-group-legend']}>
                                <td style={legendStyle?.itemGap}>
                                    <div style={legendStyle?.rankLabel}>排名</div>
                                </td>
                                {orient == 'vertical' ? (
                                    <td style={legendStyle?.itemGap}>
                                        <div style={legendStyle?.axisLabel}>
                                            {nameLabelText || '地名'}
                                        </div>
                                    </td>
                                ) : (
                                    <>
                                        <td style={legendStyle?.itemGap}>
                                            <div style={legendStyle?.axisLabel}>
                                                {nameLabelText || '地名'}
                                            </div>
                                        </td>
                                        <td style={legendStyle?.itemGap}></td>
                                    </>
                                )}
                                <td style={legendStyle?.itemGap}>
                                    <div style={legendStyle?.valueLabel}>
                                        {valueLabelText || '占比'}
                                    </div>
                                </td>
                                {valueLabelText2 && (
                                    <td style={legendStyle?.itemGap}>
                                        <div style={legendStyle?.valueLabel}>{valueLabelText2}</div>
                                    </td>
                                )}
                            </tr>
                        )}
                        {data?.length > 0 &&
                            data.map((item: any, i: any) => (
                                <BarYCategoryItem
                                    item={item}
                                    key={i}
                                    index={rank ? rank[i] : i + 1}
                                    {...props}
                                />
                            ))}
                    </tbody>
                </table>
            }
            {
                col == 2 && <div className={'flex gap-[20px]'}>
                    <div className={'w-1/2'}>
                        <table className={`${styles['popular-ranking']} ${className || ''}`}>
                            <tbody className={styles['ranking-tbody']}>
                                {titleLabel && (
                                    <tr className={styles['bar-group-legend']}>
                                        <td style={legendStyle?.itemGap}>
                                            <div style={legendStyle?.rankLabel}>排名</div>
                                        </td>
                                        {orient == 'vertical' ? (
                                            <td style={legendStyle?.itemGap}>
                                                <div style={legendStyle?.axisLabel}>
                                                    {nameLabelText || '地名'}
                                                </div>
                                            </td>
                                        ) : (
                                            <>
                                                <td style={legendStyle?.itemGap}>
                                                    <div style={legendStyle?.axisLabel}>
                                                        {nameLabelText || '地名'}
                                                    </div>
                                                </td>
                                                <td style={legendStyle?.itemGap}></td>
                                            </>
                                        )}
                                        <td style={legendStyle?.itemGap}>
                                            <div style={legendStyle?.valueLabel}>
                                                {valueLabelText || '占比'}
                                            </div>
                                        </td>
                                        {valueLabelText2 && (
                                            <td style={legendStyle?.itemGap}>
                                                <div style={legendStyle?.valueLabel}>{valueLabelText2}</div>
                                            </td>
                                        )}
                                    </tr>
                                )}
                                {data?.length > 0 &&
                                    data.slice(0, length1).map((item: any, i: any) => (
                                        <BarYCategoryItem
                                            item={item}
                                            key={i}
                                            index={rank ? rank[i] : i + 1}
                                            {...props}
                                        />
                                    ))}
                            </tbody>
                        </table>
                    </div>
                    <div className={'w-1/2'}>
                        <table className={`${styles['popular-ranking']} ${className || ''}`}>
                            <tbody className={styles['ranking-tbody']}>
                                {titleLabel && (
                                    <tr className={styles['bar-group-legend']}>
                                        <td style={legendStyle?.itemGap}>
                                            <div style={legendStyle?.rankLabel}>排名</div>
                                        </td>
                                        {orient == 'vertical' ? (
                                            <td style={legendStyle?.itemGap}>
                                                <div style={legendStyle?.axisLabel}>
                                                    {nameLabelText || '地名'}
                                                </div>
                                            </td>
                                        ) : (
                                            <>
                                                <td style={legendStyle?.itemGap}>
                                                    <div style={legendStyle?.axisLabel}>
                                                        {nameLabelText || '地名'}
                                                    </div>
                                                </td>
                                                <td style={legendStyle?.itemGap}></td>
                                            </>
                                        )}
                                        <td style={legendStyle?.itemGap}>
                                            <div style={legendStyle?.valueLabel}>
                                                {valueLabelText || '占比'}
                                            </div>
                                        </td>
                                        {valueLabelText2 && (
                                            <td style={legendStyle?.itemGap}>
                                                <div style={legendStyle?.valueLabel}>{valueLabelText2}</div>
                                            </td>
                                        )}
                                    </tr>
                                )}
                                {data?.length > 0 &&
                                    data.slice(length1, length2).map((item: any, i: any) => (
                                        <BarYCategoryItem
                                            item={item}
                                            key={i}
                                            index={rank ? rank[i] : i + length1 + 1}
                                            {...props}
                                        />
                                    ))}
                            </tbody>
                        </table>
                    </div>

                </div>
            }

        </>
    );
};
export default BarYCategory;